<template>
	<view class="box">
		<view class="title">
			购买须知
		</view>
		<view class="subtit">
			以下内容为本产品的重要信息，请仔细阅读
		</view>
		<view class="subtit">
			一、 健康告知
		</view>
		<view class="words words1">
			激活服务时需符合如下健康状况，如不符合购买后，高端细胞服务无法使用。
		</view>
		<view class="words">
			1. 未曾被医疗机构确诊或诊断疑似患有恶性肿瘤（包括癌症、白血病、 淋巴瘤、骨髓瘤）、癌前病变、原位癌、类癌、肝硬化、不明性质肿瘤/ 新生物/肿块/息肉/结节；肿瘤标志物或组织及其细胞病理学检查异常；
		</view>
		<view class="words">
			2. 1年内未有下列症状：血尿、蛋白尿、便血（非痔疮出血）或黑便、 进食梗噎感或吞咽困难、中重度度贫血（Hb<90g /l）、不明原因皮下出血 点或紫癜、运动障碍或失调、不明原因持续或反复发热（超过2周）；不
				明原因的持续或间歇性疼痛（超过 1个月）；乳头异常溢液或糜烂、被建 议病理学检查或穿刺检查； </view>
				<view class="words">
					3. 被保险人未曾患有遗传性疾病，先天性畸形、变形或染色体异常。
				</view>
				<view class="subtit">
					二、本产品服务信息
				</view>
				<view class="words words1">
					本产品购买规则，激活服务续符合
				</view>
				<view class="words">
					1. 客户年龄：18-75 周岁
				</view>
				<view class="words">
					2. 服务生效规则：购买后，成功激活后第二个工作日生效
				</view>
				<view class="words">
					3. 服务有效期：1 年
				</view>
				<view class="words">
					4. 服务对象：仅限客户本人使用
				</view>
				<view class="words">
					5. 等待期：30 天
				</view>
				<view class="words">
					6. 既往症限制说明：基础服务中“重疾绿通服务”、全护卡服务，限既往症 不能使用；全护卡、高端细胞疗法，需符合不同产品健康告知，具体关注电子 手册详细说明。
				</view>
				<view class="words">
					7. 服务申请及说明请登录公众号，下载及阅读服务使用手册
				</view>
				<view class="title">
					我已阅读继续购买
				</view>
				<view class="list">
					<view class="li">
						<div class="cardBox">
							<div class="nameAndSign">
								<div class="name_shadow">瑞享延年优享 个人卡</div>

							</div>
							<div class="timeBox">
								<div class="timeTxt">有效期</div>
								<div class="timeVal">购买后365天内有效</div>
							</div>
							<div class="priceBox_shadow">
								<div class="priceSign">￥</div>
								<div class="priceVal">399</div>
							</div>

							<div class="buyBtn J_buyBtn">购买</div>
						</div>
					</view>
					<!-- <view class="quanyi">
						<view class="title1">
							专属权益
						</view>
						<view class="detail">
							权益说明<u-icon name="arrow-right" color="#666" size="22"></u-icon>
						</view>
					</view>
					<view class="icons">
						<view class="item">
							<view class="icon">
								<image src="../../../static/img/ABUIABAEGAAgjqWTuQYotID0yAQw6Ac46Ac.png" mode="">
								</image>
							</view>
							<view class="intro">
								个人卡会员
							</view>
						</view>
						<view class="item">
							<view class="icon">
								<image src="../../../static/img/ABUIABAEGAAgjaWTuQYoiryDkQcw6Ac46Ac.png" mode="">
								</image>
							</view>
							<view class="intro">
								12小时在线客服
							</view>
						</view>
					</view> -->
					<view class="li li1">
						<div class="cardBox">
							<div class="nameAndSign">
								<div style="color: #f2dbb4; opacity: 1;" class="name_shadow">瑞享延年优享 家庭卡</div>

							</div>
							<div class="timeBox">
								<div class="timeTxt">有效期</div>
								<div class="timeVal">购买后365天内有效</div>
							</div>
							<div class="priceBox_shadow" style="color: #f2dbb4; opacity: 1;">
								<div class="priceSign">￥</div>
								<div class="priceVal">799</div>
							</div>

							<div class="buyBtn J_buyBtn">购买</div>
						</div>
					</view>
				</view>
				<view class="quanyi">
					<view class="title1">
						专属权益
					</view>
					<view class="detail">
						权益说明<u-icon name="arrow-right" color="#666" size="22"></u-icon>
					</view>
				</view>
				<view class="icons">
					<view class="item">
						<view class="icon">
							<image src="../../../static/img/ABUIABAEGAAgjqWTuQYotID0yAQw6Ac46Ac.png" mode=""></image>
						</view>
						<view class="intro">
							专属会员卡
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<image src="../../../static/img/ABUIABAEGAAgjaWTuQYoiryDkQcw6Ac46Ac.png" mode=""></image>
						</view>
						<view class="intro">
							12小时在线客服
						</view>
					</view>
				</view>
				<!-- 权益说明 -->
					<u-popup :closeable="true" border-radius="14"  mode="bottom" v-model="show">
							<view class="content">
								<view class="title2">
									权益说明
								</view>
								<view class="rule">
									本产品购买规则，激活服务续符合
								</view>
								<view class="intro1">
									<view class="">
										1. 客户年龄：18-75 周岁
									</view>
									<view class="">
										2. 服务生效规则：购买后，成功激活后第二个工作日生效
									</view>
									<view class="">
										3. 服务有效期：1 年
									</view>
									<view class="">
										4. 服务对象：仅限客户本人使用
									</view>
									<view class="">
										5. 等待期：30 天
									</view>
									<view class="">
									6. 既往症限制说明：基础服务中“重疾绿通服务”、全护卡服务，限既往症 不能使用；全护卡、高端细胞疗法，需符合不同产品健康告知，具体关注电子 手册详细说明。
									</view>
									<view class="">
										7. 服务申请及说明请登录公众号，下载及阅读服务使用手册
									</view>
								</view>
							</view>
						</u-popup>
				<!-- 
		<view class="words">
			小猫健康微信公众号
		</view>
		<view class="words">
			服务电话：4008-567-560
		</view>
		<view class="words">
			鄂公网安备420106020009898号
		</view>
		<view class="words">
			鄂ICP备2024076426号-1
		</view>
		<view class="words">
			©2024 小猫健康 版权所有
		</view> -->
		</view>
</template>
<script>
	export default {
		data() {
			return {
				show:true
			}

		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 36rpx;
		.content{
			padding: 20px;
			.title2{
				font-size: 17px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 15px;
				text-align: center;
			}
			.rule{
				color: #333;
				font-size: 15px;
				font-weight: bold;
				margin-bottom: 10px;
				
			}
			.intro1>view{
					margin-bottom: 5px;
					text-align: justify;
					color: #414141;
			}
		}

		.icons {
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			.item {
				margin-right: 30px;

				.intro {
					margin: 10px 0 0;
				}

				.icon {
					margin: 0 auto;
					border: 1px solid #c7a34c;
					border-radius: 50%;
					height: 52px;
					overflow: hidden;
					border-radius: 50%;
					width: 52px;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 25px;
						height: 25px;
					}
				}
			}
		}

		.quanyi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;

			.title1 {
				color: #353535;
				font-size: 14px;
				font-weight: 700;



			}

			.detail {
				display: flex;
				align-items: center;
			}
		}

		.title {
			color: #333;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			padding: 20px 0;
		}

		.subtit {
			color: #666;
			font-size: 14px;
			font-weight: bold;
			padding: 0 0 20px 0;
		}

		.words {
			color: #666;
			font-size: 14px;
			margin-bottom: 12rpx;
			text-align: justify;
		}

		.words1 {
			margin-bottom: 30rpx;
		}

		.list {
			.li {
				margin: 0 auto;
				width: 100%;
				height: 300rpx;
				background: url('../../../static/img/img4.png') no-repeat;
				background-size: cover;
				border-radius: 20rpx;
				box-shadow: 0 15rpx 20rpx 0 rgba(51, 51, 51, .12);
				position: relative;


				.cardBox {
					margin-bottom: 20px;
				}

				.cardBox .nameAndSign {
					align-items: baseline;
					display: flex;
					left: 20px;
					position: absolute;
					top: 15px
				}


				.cardBox .nameAndSign .name_shadow,
					{
					font-size: 23px;
					font-weight: bolder;
				}

				.cardBox .nameAndSign .name_shadow {
					color: #fff;
					opacity: 0.7;
					text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
				}

				.cardBox .nameAndSign .sign {
					background: #000;
					border-radius: .34rem;
					color: #fff;
					display: inline-block;
					font-size: .43rem;
					height: .68rem;
					line-height: .68rem;
					margin-left: .32rem;
					opacity: .5;
					text-align: center;
					vertical-align: text-top;
					width: 1.75rem
				}

				.cardBox .timeBox {
					bottom: 20px;
					color: #fff;
					font-size: 13px;
					left: 20px;
					opacity: .7;
					position: absolute
				}

				.cardBox .priceBox {
					color: #fff;
					position: absolute;
					right: 20px;
					top: 50px
				}

				.cardBox .priceBox .priceSign {
					display: inline-block;
					font-size: 14px;
					vertical-align: text-bottom
				}

				.cardBox .priceBox .priceVal {
					display: inline-block;
					font-size: 20px;

					vertical-align: baseline
				}

				.cardBox .priceBox_shadow {
					color: #fff;
					opacity: 0.7;
					text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
					position: absolute;
					right: 20px;
					top: 40px
				}

				.cardBox .priceBox_shadow .priceSign {
					display: inline-block;
					font-size: 14px;

					vertical-align: text-bottom
				}

				.cardBox .priceBox_shadow .priceVal {
					display: inline-block;
					font-size: 30px;

					vertical-align: baseline
				}

				.cardBox .buyBtn {
					background: rgba(0, 0, 0, .5);
					border-radius: 40px;
					bottom: 20px;
					color: #fff;
					font-size: 17px;
					font-weight: 400;
					// padding: 2px 12px;
					position: absolute;
					right: 20px;
					width: 80px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					font-weight: bold;

					background: url('../../../static/img/buyBtn1.png') no-repeat;
					background-size: cover;
					color: #926120;
					animation: pulse 1s infinite;

				}
				 @keyframes pulse {
				    0% {
						transform: scale(1);
				      // box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
				    }
				    70% {
						transform: scale(1.1);
				    }
				      // box-shadow: 0 0 10px 10px rgba(157, 104, 34, 0.7);
				    100% {
						transform: scale(1);
				      // box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
				    }
				  }

				.cardBox .rightIco {
					bottom: 1rem;
					color: #fff;
					font-size: .5rem;
					height: .43rem;
					line-height: .43rem;
					opacity: .8;
					position: absolute;
					right: .92rem;
					text-align: center
				}

				.rightsBox .titleBox {
					font-size: 0;
					height: .64rem;
					line-height: 0;
					margin-top: 1.28rem;
					position: relative
				}

				&.li1 {
					background: url("../../../static/img/cardBg3.png");
					background-size: cover;
				}


			}

		}

	}
</style>
